<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highsecondary" content="no">
  <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

  <title>询价列表 -报价模版</title>
  <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
  <link href="../lib/css/animate.min.css" rel="stylesheet">
  <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="../style/temp-mould.css">
  <style>
    [v-cloak] { display: none }
    div.q-field-vertical .q-field-label+.q-field-content { padding-top: 0!important }
    .ant-input { font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px }
  </style>
</head>
<body>
<div id="q-rfxVendorProductionQuotationTemplate" v-cloak>
  <q-card class="bg-white full-width">
    <q-card-main>
      <q-tabs
              align="left"
              v-model="mainTab"
              :two-lines="false"
              inverted
              color="primary">
        <q-tab slot="title" name="mainInfo" label="零件信息" ></q-tab>
        <q-tab-pane name="mainInfo" class="q-pa-none">
          <div class="row justify-end">
           <!-- <q-btn
                    push
                    color="primary"
                    @click="back()"
                    label="返回"
                    class="q-mt-sm q-mr-sm"></q-btn>-->
            <!-- <q-btn
                    push
                    color="primary"
                    @click="temporaryStorage(0)"
                    label="暂存"
                    class="q-mt-sm q-mr-sm"></q-btn> -->
            <q-btn
                    push
                    color="primary"
                    @click="temporaryStorage(1)"
                    label="提交报价"
                    class="q-mt-sm q-mr-sm"></q-btn>
          </div>
          <div class="row justify-between q-pa-sm position-relative">
            <div style="width: 85%" >
              <p class="q-ml-md row gutter-x-sm">
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    零件编码：
                   <span class="text-light">{{baseInfoForm.matCode}}</span>
                  </span>
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    零件名称：
                     <span class="text-light">{{baseInfoForm.matName}}</span>
                  </span>
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    单位：
                     <span class="text-light">{{baseInfoForm.unitName}}</span>
                  </span>
              </p>
              <p class="q-ml-md row gutter-x-sm">
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    币种：
                    <span class="text-light">{{baseInfoForm.currencyName}}</span>
                  </span>
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                   需求数量：
                    <span class="text-light">{{baseInfoForm.quantity}}</span>
                  </span>
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    模具摊销：
                    <span class="text-light">
                      <q-chip v-if="baseInfoForm.isMoldCostShare == 1" dense square color="positive">是</q-chip>
                      <q-chip v-if="baseInfoForm.isMoldCostShare == 0" dense square color="light">否</q-chip>
                    </span>
                  </span>
              </p>
              <p class="q-ml-md row gutter-x-sm">
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                      报价模版：
                      <span class="text-light">{{baseInfoForm.quoteTempName}}</span>
                  </span>
              </p>
            </div>
          </div>
        </q-tab-pane>
      </q-tabs>
    </q-card-main>
    <q-card-main v-if="baseInfoForm.isMoldCostShare == 1">
      <q-tabs
              align="left"
              v-model="mainTab"
              :two-lines="false"
              inverted
              color="primary">
        <q-tab slot="title" name="mainInfo" label="模具摊销" ></q-tab>
        <q-tab-pane name="mainInfo">
          <div class="row justify-between q-pa-sm position-relative">
            <div style="width: 85%" >
              <p class="q-ml-md row gutter-x-sm">
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    模具摊销类型：
                    <span class="text-light" v-if="baseInfoForm.shareType==1">一次性成本摊销</span>
                    <span class="text-light" v-if="baseInfoForm.shareType==2">基于时间摊销</span>
                    <span class="text-light" v-if="baseInfoForm.shareType==3">基于数量摊销 </span>
                  </span>
                   <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    付款条件：
                    <span class="text-light">{{baseInfoForm.sharePaymentName}}</span>
                  </span>
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    交付日期：
                    <span class="text-light">{{baseInfoForm.sharePaymentTime}}</span>
                  </span>
              </p>
              <p class="q-ml-md row gutter-x-sm">
                  <span v-if="baseInfoForm.shareType!=1" class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    摊销数量：
                    <span class="text-light">{{baseInfoForm.shareQuantity}}</span>
                  </span>
                  <span v-if="baseInfoForm.shareType!=1" class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                    单位：
                    <span class="text-light">{{baseInfoForm.shareUnitName}}</span>
                  </span>
                  <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                      <q-field
                              class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                          <q-input
                                  :float-label="$t('模具摊销费用')"
                                  type="number"
                                  v-model="quoteForm.mouldSharePrice"></q-input>
                      </q-field>
                  </span>
              </p>
            </div>
          </div>
        </q-tab-pane>
      </q-tabs>
    </q-card-main>
    <q-card-main>
        <temp-mould v-if="baseInfoForm.quoteTempCode == 'MOULD'" @change="dataChange"></temp-mould>
        <temp-production v-if="baseInfoForm.quoteTempCode == 'FACTORY'" @change="dataChange"></temp-production>
      <!-- <q-tabs inverted color="primary" v-model="selectedTab">
        <q-tab slot="title" name="tab-1" label="费目信息"></q-tab>
        <q-tab-pane name="tab-1" class="q-pa-md">
            <div class="row gutter-x-sm gutter-y-sm q-mt-sm">
                <q-field
                        :error="$v.quoteForm.dailyProduction.$error"
                        error-label="该字段为必填项"
                        class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                            :float-label="$t('日峰产量（个）')"
                            type="number"
                            @blur="$v.quoteForm.dailyProduction.$touch"
                            v-model="quoteForm.dailyProduction"></q-input>
                </q-field>
                <q-field
                        :error="$v.quoteForm.yearProduction.$error"
                        error-label="该字段为必填项"
                        class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                            :float-label="$t('年产能（个)')"
                            type="number"
                            @blur="$v.quoteForm.yearProduction.$touch"
                            v-model="quoteForm.yearProduction"></q-input>
                </q-field>
                <q-field
                        class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                            :float-label="$t('原材料费')"
                            type="number"
                            v-model="quoteForm.rawMatPrice"></q-input>
                </q-field>
            </div>
            <div class="row gutter-x-sm gutter-y-sm q-mt-sm">
                <q-field
                        class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                            :float-label="$t('外协外购')"
                            type="number"
                            v-model="quoteForm.outsourceMatPrice"></q-input>
                </q-field>
                <q-field
                        class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                            :float-label="$t('加工费')"
                            type="number"
                            v-model="quoteForm.processPrice"></q-input>
                </q-field>
                <q-field
                        class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                            :float-label="$t('装配费')"
                            type="number"
                            v-model="quoteForm.erectionPrice"></q-input>
                </q-field>
            </div>
          </q-tab-pane>
      </q-tabs> -->
    </q-card-main>
  </q-card>
</div>

<!-- ie-polyfill 、 vue.js and quasar-framework -->
<script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
<script src="../lib/js/vue.js"></script>
<script src="../lib/js/quasar.mat.umd.min.js"></script>
<!-- babel for es6 transform -->
<!-- <script src="lib/js/babel.min.js"></script> -->
<!-- vue validate -->
<script src="../lib/js/vuelidate.min.js"></script>
<script src="../lib/js/validators.min.js"></script>
<!-- consts and utils ps: always leave this file first -->
<script src="../script/consts.js"></script>
<script src="../script/utils.js"></script>
<!-- status code -->
<script src="../script/status.code.js"></script>
<!-- qs for axios -->
<script src="../lib/js/qs.min.js"></script>
<!-- axios for http request -->
<script src="../lib/js/axios.js"></script>
<!-- axios.instance must be after axios -->
<script src="../script/axios.instance2.js"></script>
<!-- quasar i18n zh-hans -->
<script src="../lib/lang/zh-hans.js"></script>
<!-- vue-i18n for application's internationalization -->
<script src="../lib/js/vue-i18n.js"></script>
<!-- current page international file -->
<script src="../lang/sor/rfxPurAdd.js"></script>
<!-- components -->
<script src="../components/h-form-table.js"></script>
<!-- templates -->
<script src="../templates/temp-production.js"></script>
<script src="../templates/temp-mould.js"></script>

<script>
  // quasar components use
  Vue.use(window.vuelidate.default)
  var minLength = window.validators.minLength
  var required = window.validators.required
  Quasar.i18n.set(Quasar.i18n[LANGUGE])
  new Vue({
    el: '#q-rfxVendorProductionQuotationTemplate',
    i18n: i18n,
    data: function() {
      return {
        mainTab: 'mainInfo',
        // 通用
        selectedTab: 'tab-1',
        baseInfoForm: {
          matCode:'',
          matName:'',
          unitName:'',
          currencyName:'',
          quantity:'',
          quoteTempName:'',
          quoteTempCode:'',
          shareType:'',
          shareQuantity:'',
          shareUnitName:'',
          sharePaymentName:'',
          sharePaymentTime:'',
          isMoldCostShare:'',
        },
        quoteForm:{
          dailyProduction:'',
          yearProduction:'',
          rawMatPrice:'',
          outsourceMatPrice:'',
          processPrice:'',
          erectionPrice:'',
          mouldSharePrice:''
        },

        // 通用
        addOrEdit: 1, // 1 新增 2 编辑
        disable: true,
        tabsJsonStr: ''
      }
    },
    validations: {
      quoteForm: {
        dailyProduction: {required: required},
        yearProduction: {required: required}
      }
    },
    computed: {
    },
    watch: {

    },
    created: function() {
      this.signUp();
      // this.getExpense()
    },
    methods: {
      back:function () {
         // history.go(-1);
        var args = GetRequest();
          if(args.type==0){
            window.location.href = 'rfxVendorQuotedPrice.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-2'
          }else if(args.type==1){
            window.location.href = 'rfxVendorQuotedPrice.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-3'
          }else if(args.type==2){
            window.location.href = 'rfxVendorEnquiryPriceView.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-2'
          }

      },
      signUp:function () {
        var args = GetRequest();
        var that = this
        axios({
          method: 'post',
          url: '/manager/rfq/item/getRfqItem/'+args.rfqItemId
        })
        .then(function(data) {
          that.baseInfoForm = {
            matCode:data.data.matCode,
            matName:data.data.matName,
            unitName:data.data.unitName,
            currencyName:data.data.currencyName,
            quantity:data.data.quantity,
            quoteTempName:data.data.quoteTempName,
            quoteTempCode:data.data.quoteTempCode,
            shareType:data.data.shareType,
            shareQuantity:data.data.shareQuantity,
            shareUnitName:data.data.shareUnitName,
            sharePaymentName:data.data.sharePaymentName,
            sharePaymentTime:data.data.sharePaymentTime,
            isMoldCostShare:data.data.isMoldCostShare,
          }
        })
        .catch(function(err) {
          console.log(err)
        })
      }, 
      temporaryStorage:function (status) {
        if(this.baseInfoForm.isMoldCostShare==1){
          if(!this.quoteForm.mouldSharePrice){
            alert("请填写模具摊销金额！");
            return;
          }
        }
        // this.$v.quoteForm.$touch();
        // if (!this.$v.quoteForm.$error) {
          var args = GetRequest();

          var that = this;
          axios({
            method: 'post',
            url: '/manager/rfqvendor/quote/vendorQuote',
            data: {
              id:args.quoteId,
              rfqItemId: args.rfqItemId,
              headerId: args.headerId,
              rfqSupplierId: args.rfqSupplierId,
              status: status,
              mouldSharePrice:this.quoteForm.mouldSharePrice,
              tabsJsonStr: this.tabsJsonStr
              // dailyProduction:this.quoteForm.dailyProduction,
              // yearProduction:this.quoteForm.yearProduction,
              // rawMatPrice:this.quoteForm.rawMatPrice,
              // outsourceMatPrice:this.quoteForm.outsourceMatPrice,
              // processPrice:this.quoteForm.processPrice,
              // erectionPrice:this.quoteForm.erectionPrice,
            }
          })
          .then(function(data) {
            console.log(data);
            if(status==1){
              if(data.success==true){
                if(args.type==0){
                  window.location.href = 'rfxVendorQuotedPrice.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-2'
                }else if(args.type==2){
                  window.location.href = 'rfxVendorEnquiryPriceView.html?headerId=' + args.headerId+'&id='+args.rfqSupplierId+'&tab=tab-2'
                }
              }
            }
            that.btnLoading = false
          })
          .catch(function(err) {
            console.log(err)
          })
        // }
      },
      getExpense:function () {
        var args = GetRequest();
        var that = this
        axios({
          method: 'post',
          url: '/manager/rfqvendor/quote/getRfqQuote/'+args.quoteId
        })
        .then(function(data) {
          that.quoteForm = {
            dailyProduction:data.data.dailyProduction,
            yearProduction:data.data.yearProduction,
            rawMatPrice:data.data.rawMatPrice,
            outsourceMatPrice:data.data.outsourceMatPrice,
            processPrice:data.data.processPrice,
            erectionPrice:data.data.erectionPrice,
            mouldSharePrice:data.data.mouldSharePrice
          }
        })
        .catch(function(err) {
          console.log(err)
        })
      },
      dataChange: function(newV) {
        console.log(newV, 11111111)
        this.tabsJsonStr = JSON.stringify(newV)
      }
    }
  })
</script>
</body>
</html>